<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>网站管理系统</title>
<meta name="author" content="" />
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no" />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/css/style.css" />
    <link rel="stylesheet" type="text/css" href="__STATIC__/admin/css/page.css" />

<!--[if lt IE 9]>
<script src="js/html5.js"></script>
<![endif]-->
<link href="__STATIC__/admin/font/css/font-awesome.min.css" rel="stylesheet" />
<script src="__STATIC__/admin/js/jquery.js"></script>
<script type="text/javascript" src="__STATIC__/admin/js/jquery-ui-1.10.3.min.js"></script>
<script src="__STATIC__/admin/js/jquery.mCustomScrollbar.concat.min.js"></script>

<script type="text/javascript" charset="utf-8" src="__STATIC__/admin/js/editor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="__STATIC__/admin/js/editor/ueditor.all.min.js"> </script>
    <!--建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败-->
    <!--这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文-->
    <script type="text/javascript" charset="utf-8" src="__STATIC__/admin/js/editor/lang/zh-cn/zh-cn.js"></script>
    <script src="__STATIC__/admin/js/layer/layer.js"></script>
<script>
    (function($){
         $("body").sortable({handle: '#san'});
        $(window).load(function(){
            
            $("a[rel='load-content']").click(function(e){
                e.preventDefault();
                var url=$(this).attr("href");
                $.get(url,function(data){
                    $(".content .mCSB_container").append(data); //load new content inside .mCSB_container
                    //scroll-to appended content 
                    $(".content").mCustomScrollbar("scrollTo","h2:last");
                });
            });
            
            $(".content").delegate("a[href='top']","click",function(e){
                e.preventDefault();
                $(".content").mCustomScrollbar("scrollTo",$(this).attr("href"));
            });
            
        });
    })(jQuery);
</script>
</head>
<body style="position:relative;">


<style>
    .red{color: white;background: red;border: 1px solid;border-radius: 5px;width: 10px;height: 10px;margin-left: 2px;}
    .customer{padding: 10px 0;border-bottom: 1px #eee solid;text-align: center}
    .blue{color: white;background: deepskyblue}
    .customer_button{position:absolute;z-index:1;width:50px;height:50px;border-radius:50px;background-image:url('__STATIC__/admin/images/dustomer.png');background-size:100% 100%;right:20px;bottom: 110px;}
    #san:hover{
        cursor:move;
    }
    .customer_button_red{display: block;width: 18px;height: 18px;border-radius: 18px;color: white;background-color: red;text-align: center;}
</style>
<div class='customer_list' style="position:absolute;z-index:2;top:-100%;background-color:white;width: 100%;height: 100%;border-bottom: 1px #eee solid">
    <div style="width: 100%;text-align: center;padding: 15px 0;border-bottom: 1px #eee solid;">咨询客户</div>
    <ul id="chat">

    </ul>
</div>

<iframe id="iframe" data-id="0" src="{:url('chat/mkit',['id' => $id,'touid' => $touid])}" frameborder="0" width="100%" height="100%" style="float: right"></iframe>

<div class="customer_button" id="san"></div>

</div>
</section>
</body>
<script>

    function getList() {
        var now_id = $('#iframe').attr('data-id');
        $.ajax({
            type: "get",
            url: "{:url('chat/chatList',['id' => $id])}",
            dataType: "json",
            success: function (data) {
                if(data.code == -1){
                    return false;
                }
                $('#chat').empty();   //清空resText里面的所有内容
                var html = '';
                var comment_num = 0;
                $.each(data.list, function (commentIndex, comment) {
                    html += '<li style="cursor: pointer;" class="customer';
                    if(now_id == comment.id){
                        html += ' blue';
                    }
                    html += '" onclick="chat('+comment.id+','+comment.goods_id+')">'+comment.nickname;
                    if(comment.num > 0){
                        html += '<span class="red">'+comment.num+'</span>';
                        comment_num+=comment.num;
                    }
                    html += '</li>';
                });

                if(comment_num != 0){
                    customer_button_red_html = '<span class="customer_button_red">1</span>';
                    $('#san').html(customer_button_red_html);
                }

                if(comment_num == 0){
                    $('#san').empty();
                }

                $('#chat').html(html);
            }

        });
    }
    setInterval("getList()", "3000");

    function chat(id,goods_id){
        $('#iframe').attr('src',"{:url('chat/mkit',['id' => $id])}/touid/"+id+"/goods_id/"+goods_id);
        $('#iframe').attr('data-id',id);
        $('.customer_list').animate({top:'-100%'});
        $.ajax({
            type : "POST",
            url: "{:url('chat/readChat')}",
            data: {uid:{$id},touid:id},
            dataType: "json",
            success: function(res){
                //console.log(res);
            }
        });
    }


    $('.customer_button').click(function(){
        $('.customer_list').animate({top:'0'});
    });
</script>
</html>